<template>
	<view>
		<view class="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221201/a3bb29380779452e80670647a73d595c.jpg" mode="widthFix" class="b-cover"></image>
			<view class="b-title">响应式网站</view>
		</view>
		<view class="explain">
			<view class="e-title">一个网站适应多种多种屏幕尺寸？</view>			
			<view class="e-subtitle">
				<text>没错，它就是</text>
				<text class="yellow">响应式网站</text>
			</view>
			<view class="e-content">让您的网站走在互联网的前端！以最佳的用户体验，让最佳的用户体验，让客户随时随地找到您！所谓响应式网页建设，是指可以自动识别屏幕宽度、并做出相应调整的网页设计，简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。现在使用移动设备的人越来越多，移动版的Webisite随之也越来越重要；但是移动端设备的大小不一,屏幕分辨率各不相同，我们不可能为BlackBerry,iPhone,iPad等等每个都做单独的页面设计。</view>
			<view class="e-list">
				<view class="el-box">
					<view class="elb-icon icon1"></view>
					<view class="elb-text">宽屏显示器</view>
				</view>
				<view class="el-box">
					<view class="elb-icon icon2"></view>
					<view class="elb-text">笔记本</view>
				</view>
				<view class="el-box">
					<view class="elb-icon icon3"></view>
					<view class="elb-text">平板电脑</view>
				</view>
				<view class="el-box">
					<view class="elb-icon icon4"></view>
					<view class="elb-text">手机</view>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="content">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/61574e172ee54ea8a51912be2e14b169.jpg" mode="aspectFill" class="c-cover"></image>
			<view class="c-title">响应式网站建设</view>
			<text class="c-desc" :user-select="true">移动互联网的迅猛发展，由于电脑的不便携带性，很多人很多时候开始使用手机或者IPad应急办公，所以响应式网站成了近几年企业建站的一个主流。所谓响应式网站，是指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。现在使用移动设备的人越来越多，移动版的
			Webisite随之也越来越重要；但是移动端设备的大小不一，屏幕分辨率各不相同，我们不可能为BlackBerry,iPhone,iPad等等每个都做单独的页面设计。</text>
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221115/4f532b11e499442381d21198eadb7076.jpg" mode="aspectFill" class="c-cover"></image>
			<view class="c-title">响应式网站的优势</view>
			<text class="c-desc" :user-select="true">兼容性高：传统网站不兼容其他终端设备，跳转至其他设备很容易造成内容缺失，跳转速度慢。而响应式网站不仅能适应各种屏幕尺寸的手机端，也兼容各种

用户体验佳：传统建站会把手机端、电脑端网站独立开发，网站用不同的网址，如果用不同设备了解某个官网，需要重复输入不同网站地址，多少有些麻烦。而响应式网站省去了这些麻烦，一个网址可以在任何设备上直接做跳转，不耽误时间，这就给用户增加了好感，间接提高了转化率。

网站SEO优化更简便：传统网站因为是独立不同的网址，需要单独分开去做优化，而响应式网站只要稍稍做点变动，移动和电脑端优化都能很顺利进行，同时响应式网站也越来越受搜索引擎的青睐，是未来的发展趋势。</text>
		</view>
		<view class="hr"></view>
		<view class="service">
			<view class="s-title">响应式网站建设-服务流程</view>
			<view class="s-desc">PC网站、移动网站 、微站三合一</view>
			<view class="s-list">
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/e74062336aa2487197175cb74a4ab0ed.png" class="slb-icon icon1"></image>
					<view class="slb-title">专属策划</view>
					<text class="slb-desc">倾听客户需求，了解\n用户使用环境和操作流程</text>
				</view>
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/db260b27b31d48448ad1839ab999b322.png" class="slb-icon icon1"></image>
					<view class="slb-title">项目策划</view>
					<text class="slb-desc">头脑风景交互情景\n模拟原型设计</text>
				</view>
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/68c6bdbb18e740d38619c5b804572c43.png" class="slb-icon icon1"></image>
					<view class="slb-title">交互设计</view>
					<text class="slb-desc">头脑风景交互情景\n模拟原型设计</text>
				</view>
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/b678bea0459140ef96c1ebc46938879e.png" class="slb-icon icon1"></image>
					<view class="slb-title">视觉创意</view>
					<text class="slb-desc">色彩及平面元素设定\n结构和布局规范确认</text>
				</view>
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/c0b11a1d09474a708e10e44f199b66ad.png" class="slb-icon icon1"></image>
					<view class="slb-title">前端制作</view>
					<text class="slb-desc">CSS3、JS、HTML5\n实现页面的动态展示</text>
				</view>
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/b17a258be5b34f6993b9491e03147c11.png" class="slb-icon icon1"></image>
					<view class="slb-title">技术开发</view>
					<text class="slb-desc">移动应用数据\n对接与开发</text>
				</view>
				<view class="sl-box">
					<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/912fa117f8084594b1ffde08d27081ae.png" class="slb-icon icon1"></image>
					<view class="slb-title">测试反馈</view>
					<text class="slb-desc">修改调整，规范完善</text>
				</view>
			</view>
		</view>
		<view class="rule">
			<view class="r-item">
				<view class="ri-title">HTML5响应式网站建设执行准则</view>
				<view class="ri-subtitle">全程规划</view>
				<view class="ri-subdesc">网站项目设计开发布局特效，全程规划整理构思</view>
				<view class="ri-subtitle">设计100%</view>
				<view class="ri-subdesc">网站首页及内页设计风格，无修改次数限制，甲方满意确认</view>
				<view class="ri-subtitle">多元素支持</view>
				<view class="ri-subdesc">整个网站设计项目所有素材图，提供特效设计开发等多元素技术支持</view>
				<view class="ri-subtitle">确认方可</view>
				<view class="ri-subdesc">整体设计+特效质量+设计品质+资料排版确认满意为止</view>
			</view>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '高端网站定制开发-响应式网站设计制作-纺扬网站建设',
					description: '品牌一站式服务,集创意,策划,设计,开发于一身的纺扬网站建设（☏:191-0267-1826）,提供专业网站定制,创意H5/小程序,品牌设计,活动策划.一对一24小时服务,欢迎来电咨询!',
					keywords: '响应式网站建设,响应式网站制作,响应式网站开发,响应式网站设计,纺扬网站建设'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");

	.explain {
		margin-top: 40rpx;
		
		.e-title {
			font-size: 36rpx;
			color: @color-title-black;
			text-align: center;
		}
		
		.e-subtitle {
			font-size: 36rpx;
			color: @color-title-black;
			text-align: center;
			
			.yellow {
				color: @color-yellow;
			}
		}
		
		.e-content {
			margin-top: 18rpx;
			padding: 0 24rpx;
			font-size: 24rpx;
		}
			
		.e-list {
			margin-top: 47rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			
			.el-box {
				margin-bottom: 40rpx;
				
				.elb-icon {
					width: 117rpx;
					height: 117rpx;
					border-radius: 50%;
					
					&.icon1 {
						background: @color-blue url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/907ac5260b0c44fbb13599af7e54e1c2.jpg) center / 50rpx no-repeat;
					}
					
					&.icon2 {
						background: @color-blue url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/6a7a29faeea84c078137b72449fe151e.jpg) center / 65rpx no-repeat;
					}
					
					&.icon3 {
						background: @color-blue url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/8039ae1dfd5f41528951621a61583c57.jpg) center / 35rpx no-repeat;
					}
					
					&.icon4 {
						background: @color-blue url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/45be0068373f434fb418acd452f60052.jpg) center / 30rpx no-repeat;
					}
				}
				
				.elb-text {
					margin-top: 20rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}

	.content {
		padding-bottom: 40rpx;
		overflow: hidden;
		
		.c-cover {
			margin: 48rpx auto 0;
			display: block;
			width: 338rpx;
			height: 338rpx;
			border-radius: 50%;
			border: 10rpx solid #e6e6e6;
		}
		
		.c-title {
			font-size: 30rpx;
			padding: 0 24rpx;
			margin-top: 20rpx;
		}
		
		.c-desc {
			font-size: 24rpx;
			margin-top: 27rpx;
			padding: 0 24rpx;
			line-height: 36rpx;
			display: block;
		}
	}

	.service {
		padding-top: 40rpx;
		
		.s-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.s-desc {
			margin-top: 18rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: bold;
		}
		
		.s-list {
			margin-top: 30rpx;
			padding: 0 24rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			
			.sl-box {
				flex: calc(100% / 3) 0;
				margin-bottom: 40rpx;
				overflow: hidden;
				
				.slb-icon {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 5rpx solid #e6e6e6;
					display: block;
					margin: 0 auto;
				}
				
				.slb-title {
					text-align: center;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
				
				.slb-desc {
					display: block;
					font-size: 20rpx;
					color: #999;
					margin-top: 9rpx;
					text-align: center;
				}
			}
		}
	}

	.rule {
		margin-top: 80rpx;
		background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221202/ba1853fd1e434902bb2e00f197a9d97f.jpg) center / cover no-repeat;
		position: relative;
		padding-bottom: 40rpx;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(33, 33, 33, .6);
		}
		
		.r-item {
			position: relative;
			z-index: 1;
			padding: 0 24rpx;
			overflow: hidden;
			
			.ri-title {
				color: #fff;
				font-size: 34rpx;
				font-weight: bold;
				margin-top: 71rpx;
				padding-bottom: 9rpx;
				position: relative;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 140rpx;
					height: 2rpx;
					background-color: #fff;
				}
			}
			
			.ri-subtitle {
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 40rpx;
			}
			
			.ri-subdesc {
				color: #fff;
				font-size: 24rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>
